<html>
  <head>
    <style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
        background-color:white;
      }
      div#viewer {
        text-align: center;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
      var reloadTimer = null;
      function init() {
        var url = location.href;
        var index = url.indexOf('#');
        if (index != -1) {
          var id = url.substring(index + 1);
          var viewer = document.getElementById('viewer');
          var height = $(document).height();
          var width = $(document).width();
          viewer.innerHTML = '<iframe id="iframe" src="https://cacoo.com/diagrams/' + id + '/view?w=' + (width - 2) +'&h=' + (height - 30) + '" width="' + width + '" height="' + height + '" frameborder="0" scrolling="no"></iframe>';
        }
      }

      function setTimer() {
        if (reloadTimer != null) {
          clearTimeout(reloadTimer);
        }
        reloadTimer = setTimeout(function(){location.reload(true);}, 1000);
      }

      jQuery(window).resize(function(){setTimer();});
    </script>
  </head>
  <body onload="init()">
    <div id="viewer"></div>
  </body>
</html>
